<template>
  <div>
    <div class="header">
      <router-link to="/"><i class="iconfont icon-fanhui"></i></router-link>
      更多游戏
    </div>
    <div class="main">
      <div class="game">
        <h2>热门游戏</h2>
        <ul>
          <li
            v-for="(itm, i) in gamelist.hotGameList"
            :key="i"
            @click="getgamename(itm)"
          >
            <router-link to="/postorder">
              <img :src="itm.gameImgUrl" alt="" />
              <p>{{ itm.gameName }}</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="line"></div>
    <div class="main">
      <h2>全部游戏</h2>
      <div class="game" v-for="(item, i) in classify" :key="i">
        <h3>{{item.code}}</h3>
        <ul>
          <li
            v-for="(itm, id) in item.data"
            :key="id"
            @click="getgamename(itm)"
          >
            <router-link to="/postorder">
              <img :src="itm.gameImgUrl" alt="" />
              <p>{{ itm.gameName }}</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  data() {
    return {
      gamelist: [],
      count: 0,
      alphabet: [],
      classify: [],
    };
  },
  computed: {},
  methods: {
    getgamename(itm) {
      // console.log(itm.gameName);
      this.$store.commit("moregame/gamename", itm);
    },
  },
  created() {
    axios.post("/main/moreDlGame").then((res) => {
      this.gamelist = res.data.result;
      this.gamelist.dlGameList.forEach((v) => {
        if (this.alphabet.indexOf(v.gameCode) == -1) {
          this.alphabet.push(v.gameCode);
        }
        // console.log(this.alphabet);
      });
      this.alphabet.forEach((v3) => {
        this.classify.push({ code: v3, data: [] });
        // console.log(this.class);
      });
      this.classify.forEach((v4) => {
        // console.log(v4);
        this.gamelist.dlGameList.forEach((res) => {
          if (res.gameCode == v4.code) {
            v4.data.push(res);
          }
        });
      });
    });
  },
};
</script>

<style src="../assets/css/moregame.css" scoped>
</style>